<template>
  <!-- 横幅 -->
  <img class="w-full" src="@/assets/images/home/banner@2x.png" alt="image" />

  <div class="mx-auto max-w-[1600px]">
    <!-- 核心产品及服务 -->
    <div class="px-[14px] pt-[60px] min780px:px-[28px]">
      <div class="text-center text-[30px] leading-none text-[#000]">核心产品及服务</div>
      <div class="mt-[62px] flex flex-col justify-center min780px:flex-row">
        <CoreProductAndServiceCard
          main-title="软件"
          sub-title="定制开发"
          description="提供了全面的解决方案，能够满足客户特定的业务需求"
          :image-url="coreProductAndServiceCardImage1"
        />
        <CoreProductAndServiceCard
          class="mt-[20px] min780px:ml-[20px] min780px:mt-0"
          main-title="seo"
          sub-title="优化服务"
          description="帮助客户提高网站在搜索引擎中的排名，从而提高网站的流量和曝光度"
          :image-url="coreProductAndServiceCardImage2"
        />
        <CoreProductAndServiceCard
          class="mt-[20px] min780px:ml-[20px] min780px:mt-0"
          main-title="sem"
          sub-title="竞价服务"
          description="基于客户的需求和目标制定的，能够确保广告的效果最大化"
          :image-url="coreProductAndServiceCardImage3"
        />
        <CoreProductAndServiceCard
          class="mt-[20px] min780px:ml-[20px] min780px:mt-0"
          main-title="网站"
          sub-title="运营服务"
          description="帮助客户对网站进行全面的管理和优化从而提升品牌影响力和销售额"
          :image-url="coreProductAndServiceCardImage4"
        />
      </div>

      <div class="mt-[97px] pb-[74px] min780px:flex min780px:justify-between">
        <div class="bg-yellow-500 min780px:h-[600px] min780px:flex-[0_0_600px]">video</div>
        <div class="pt-[59px] min780px:flex-1 min780px:pl-[108px]">
          <div class="text-[30px] leading-none text-[#000]">为什么选择我们</div>
          <div class="mt-[19px] text-[16px] leading-none text-[#696969]">让数字化触手可及</div>
          <ChooseUsItem
            class="mt-[59px]"
            title="专业的团队"
            description="我们拥有一支高素质的团队，包括经验丰富的技术人员、优秀的设计师和营销专家"
            :image-url="chooseUsItemImage"
          />
          <ChooseUsItem
            class="mt-[30px]"
            title="定制化服务"
            description="根据客户的需求和目标量身定制，我们了解每个客户的需求都是独一无二的，过程中不断与客户沟通确保我们的服务能够最好地满足客户的需求和要求。"
            :image-url="chooseUsItemImage"
          />
          <ChooseUsItem
            class="mt-[30px]"
            title="高质量的成果"
            description="客户提供高质量的成果。能够为客户提供最优质的服务和解决方案，从而帮助客户实现他们的业务目标"
            :image-url="chooseUsItemImage"
          />
          <ChooseUsItem
            class="mt-[30px]"
            title="竞争力的价格"
            description="售后服务团队会在服务结束后继续与客户保持联系，并为他们提供必要的技术支持和售后服务。我们会不断地听取客户的反馈和建议，以不断提升我们的服务质量和客户满意度"
            :image-url="chooseUsItemImage"
          />
          <ChooseUsItem
            class="mt-[30px]"
            title="完善的售后服务"
            description="售后服务团队会在服务结束后继续与客户保持联系，并为他们提供必要的技术支持和售后服务。我们会不断地听取客户的反馈和建议，以不断提升我们的服务质量和客户满意度"
            :image-url="chooseUsItemImage"
          />
        </div>
      </div>
    </div>

    <!-- 服务流程 -->
    <div class="bg-[rgba(90,90,90,0.04)] px-[14px] pb-[49px] pt-[40px] min780px:px-[70px]">
      <div class="text-center text-[30px] leading-[24px] text-[#000]">服务流程</div>
      <div class="mt-[77px] flex overflow-y-hidden overflow-x-scroll">
        <ServiceProcessStepCard
          step="01"
          mainTitle="企业调用"
          subTitle="Enterprise research"
          color="#FECC10"
          :image-url="serviceProcessStepCardImage1"
        />
        <ServiceProcessStepCard
          step="02"
          mainTitle="需求整理"
          subTitle="Requirement organization"
          color="#0476F7"
          :image-url="serviceProcessStepCardImage2"
        />
        <ServiceProcessStepCard
          step="03"
          mainTitle="咨询报告交付"
          subTitle="Consultation report delivery"
          color="#F8089C"
          :image-url="serviceProcessStepCardImage3"
        />
        <ServiceProcessStepCard
          step="04"
          mainTitle="合同签订"
          subTitle="Contract signing"
          color="#06FF12"
          :image-url="serviceProcessStepCardImage4"
        />
        <ServiceProcessStepCard
          step="05"
          mainTitle="项目启动"
          subTitle="Project Launch"
          color="#07B0FF"
          :image-url="serviceProcessStepCardImage5"
        />
        <ServiceProcessStepCard
          step="06"
          mainTitle="原型/设计"
          subTitle="Prototype/Design"
          color="#AA07FF"
          :image-url="serviceProcessStepCardImage6"
        />
        <ServiceProcessStepCard
          step="07"
          mainTitle="项目开发"
          subTitle="Project Development"
          color="#FF0A85"
          :image-url="serviceProcessStepCardImage7"
        />
        <ServiceProcessStepCard
          step="08"
          mainTitle="测试上线"
          subTitle="Test launch"
          color="#02AFFF"
          :image-url="serviceProcessStepCardImage8"
        />
        <ServiceProcessStepCard
          step="09"
          mainTitle="项目文档交付"
          subTitle="Project Document Delivery"
          color="#FECD18"
          :image-url="serviceProcessStepCardImage9"
          :hadArrow="false"
        />
      </div>
    </div>

    <!-- 客户案例 -->
    <div class="px-[14px] pt-[85px] min780px:px-[28px]">
      <div class="text-center text-[30px] leading-[24px] text-[#000]">客户案例</div>
      <div class="mt-[70px] flex items-center justify-center overflow-x-scroll">
        <CustomerCaseButton :image-url="serviceProcessStepCardImage1" text="APP" class="ml-[27px]" />
        <CustomerCaseButton :image-url="serviceProcessStepCardImage1" text="小程序" class="ml-[27px]" />
        <CustomerCaseButton :image-url="serviceProcessStepCardImage1" text="Web" class="ml-[27px]" />
      </div>
      <CustomerCaseRotation class="mt-[50px]" />
    </div>

    <!-- 增值服务 -->
    <div class="px-[14px] pt-[62px] min780px:px-[57]">
      <div class="text-center text-[30px] leading-[24px] text-[#000]">增值服务</div>
      <div class="mt-[55px] flex flex-col overflow-y-hidden overflow-x-scroll min780px:flex-row">
        <ValueAddedServiceCard class="flex-1" :image-url="serviceProcessStepCardImage1" title="创新搜索" />
        <ValueAddedServiceCard
          class="mt-[20px] flex-1 min780px:ml-[27px] min780px:mt-0"
          :image-url="serviceProcessStepCardImage1"
          title="创新咨询"
        />
        <ValueAddedServiceCard
          class="mt-[20px] flex-1 min780px:ml-[27px] min780px:mt-0"
          :image-url="serviceProcessStepCardImage1"
          title="设计服务"
        />
        <ValueAddedServiceCard
          class="mt-[20px] flex-1 min780px:ml-[27px] min780px:mt-0"
          :image-url="serviceProcessStepCardImage1"
          title="数据与运营"
        />
        <ValueAddedServiceCard
          class="mt-[20px] flex-1 min780px:ml-[27px] min780px:mt-0"
          :image-url="serviceProcessStepCardImage1"
          title="测试与运维"
        />
        <ValueAddedServiceCard
          class="mt-[20px] flex-1 min780px:ml-[27px] min780px:mt-0"
          :image-url="serviceProcessStepCardImage1"
          title="企业培训"
        />
      </div>
    </div>

    <!-- 定制化落地方案 -->
    <div class="relative mt-[60px] overflow-hidden bg-[#ccc] px-[14px] pb-[141px] pt-[91px] min780px:px-[60px]">
      <div
        class="w-full bg-[url(~/assets/images/home/telescope@2x.png)] bg-cover pb-[56px] pl-[78px] pt-[77px] text-[#fff] min780px:max-w-[805px]"
      >
        <div class="text-[46px] leading-none">以用户为导向</div>
        <div class="mt-[23px] text-[34px] leading-none">飞智科技--让数字化触手可及</div>
        <div class="mt-[70px] text-[23px] leading-none">· 我们致力于成为新一代企业数字化咨询及软件交付服务商</div>
        <div class="mt-[24px] text-[23px] leading-none">· 帮助企业更好的善用技术做好软件产品</div>
        <div class="mt-[24px] text-[23px] leading-none">· 带动企业商业目标发展及变革</div>
        <div class="mt-[200px] text-[69px] leading-none">133-2500-2585</div>
        <div class="mt-[22px] text-[23px] leading-none">联系我们的咨询顾问，获取定制化落地方案</div>
      </div>

      <div
        class="right-[40px] top-[136px] mt-[20px] bg-[#fff] px-[14px] py-[70px] min780px:absolute min780px:max-w-[643px] min780px:pl-[80px]"
      >
        <div class="ml-[69px] text-[39px] leading-none text-[#282331]">获取定制化落地方案</div>
        <input
          class="mt-[81px] w-full bg-[#F0F2F6] p-[20px_44px] text-[23px] text-[#818181] min780px:max-w-[492px]"
          type="text"
          placeholder="请输入姓名（（必填）"
        />
        <input
          class="mt-[28px] w-full bg-[#F0F2F6] p-[20px_44px] text-[23px] text-[#818181] min780px:max-w-[492px]"
          type="text"
          placeholder="请输入联系电话（（必填）"
        />
        <textarea
          rows="4"
          class="mt-[28px] w-full bg-[#F0F2F6] p-[20px_44px] text-[23px] text-[#818181] min780px:max-w-[492px]"
          placeholder="请输入需求描述（必填）"
        ></textarea>
        <button class="mt-[43px] w-full rounded-[10px] bg-[#FF6B01] py-[8px] text-center text-[30px] text-[#fff] min780px:max-w-[254px]">
          提交需求
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import CoreProductAndServiceCard from '$/home/components/CoreProductAndServiceCard.vue'
import ChooseUsItem from '$/home/components/ChooseUsItem.vue'
import ServiceProcessStepCard from '$/home/components/ServiceProcessStepCard.vue'
import CustomerCaseButton from '$/home/components/CustomerCaseButton.vue'
import CustomerCaseRotation from '$/home/components/CustomerCaseRotation.vue'
import ValueAddedServiceCard from '$/home/components/ValueAddedServiceCard.vue'
import coreProductAndServiceCardImage1 from '@/assets/images/home/service-layer-1@2x.png'
import coreProductAndServiceCardImage2 from '@/assets/images/home/service-layer-2@2x.png'
import coreProductAndServiceCardImage3 from '@/assets/images/home/service-layer-3@2x.png'
import coreProductAndServiceCardImage4 from '@/assets/images/home/service-layer-4@2x.png'
import chooseUsItemImage from '@/assets/images/home/choose-us@2x.png'
import serviceProcessStepCardImage1 from '@/assets/images/service-step-1.png'
import serviceProcessStepCardImage2 from '@/assets/images/service-step-2.png'
import serviceProcessStepCardImage3 from '@/assets/images/service-step-3.png'
import serviceProcessStepCardImage4 from '@/assets/images/service-step-4.png'
import serviceProcessStepCardImage5 from '@/assets/images/service-step-5.png'
import serviceProcessStepCardImage6 from '@/assets/images/service-step-6.png'
import serviceProcessStepCardImage7 from '@/assets/images/service-step-7.png'
import serviceProcessStepCardImage8 from '@/assets/images/service-step-8.png'
import serviceProcessStepCardImage9 from '@/assets/images/service-step-9.png'

definePageMeta({
  middleware: 'auth'
})
</script>
